<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="nav-top d-flex align-items-center" :style="{
        paddingTop: navStyle.paddingTop,
        height: navStyle.height,
        paddingRight: navStyle.paddingRight
    }">
      <view class="logo-text d-flex justify-content-center">
        <u-avatar :src="defaultAppInfo.appLogo" size="30" v-if="defaultAppInfo&&defaultAppInfo.appLogo">
        </u-avatar>
      </view>
      <view>
        <view class="logo-text-t">{{defaultAppInfo?defaultAppInfo.name:''}}</view>
        <view class="text-secondary text-xs">uni-app template示例~</view>
      </view>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="initPage" @up="loadData" :up="upOption"
      :down="downOption" :top="navStyle.height">
      <view class="container">
        <userList :list="userData"></userList>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from '@/components/mescroll/mescroll-uni/mescroll-mixins.js'
  import userList from './components/user-list.vue'
  export default {
    mixins: [MescrollMixin],
    components: {
      userList
    },
    computed: {},
    data() {
      return {
        navStyle: {
          paddingTop: 0,
          height: '100rpx',
          paddingRight: '30rpx'
        },
        navSearchStyle: {
          height: '64rpx'
        },

        userData: [],
        loading: false,
        downOption: {
          use: true,
          auto: true,
          autoShowLoading: false,
        },
        upOption: {
          auto: false,
          page: {
            num: 0,
            size: 10
          },
          textNoMore: '-- 已经到底了 --',
          noMoreSize: 1,
          empty: {
            tip: '暂无更多信息'
          }
        },

      }
    },
    computed: {
      canLoad() {
        return this.hasLogin && this.hasReady
      },
      userInfo() {
        return this.$store.getters.userInfo
      },
    },
    watch: {
      canLoad() {
        //登录成功时
        //this.initPage()
      }
    },
    onLoad() {
      this.setNavStyle()
    },
    onShow() {},
    methods: {
      async initPage() {
        console.log('initPage index')
        setTimeout(() => {
          this.mescroll.resetUpScroll();
        }, 0)
      },
      loadData(page) { // 信息加载
        if (this.loading) return false
        if (page.num === 1) this.userData = []
        this.loading = true
        let params = {
          pageNumber: page.num,
          pageSize: page.size
        }
        setTimeout(() => {
          this.$api.getMemberList(params).then(res => {
            this.userData = this.$xf.loadPage.getList(res, this.userData)
            setTimeout(() => {
              this.mescroll.endSuccess(res.list.length, res.totalRow);
              this.loading = false
            }, 0)
          }, err => {
            this.newToast('数据加载失败')
            this.loading = false
            this.mescroll.endErr();
          })
        }, 0)
      },
      setNavStyle() {
        let menuButtonInfo = null
        // #ifdef MP-WEIXIN
        menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        // #endif
        let systemInfo = uni.getSystemInfoSync()
        if (menuButtonInfo) {
          // 小程序 胶囊
          this.navStyle = {
            paddingTop: (systemInfo.statusBarHeight) + 'px',
            height: ((systemInfo.statusBarHeight) + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
              menuButtonInfo.height) + 'px',
            paddingRight: (systemInfo.windowWidth - menuButtonInfo.left + uni.upx2px(30)) + 'px'
          }
          this.navSearchStyle = {
            height: (menuButtonInfo.height) + 'px'
          }
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .nav-top {
    background-color: $bg-color-white;
    position: fixed;
    width: 100%;
    z-index: 20;

    .logo-text {
      width: 120rpx;
      height: 60rpx;
      margin: 0 10rpx;
    }

    .logo-text-t {
      text-align: left;
      font-weight: bold;
      font-size: $font-size-md;
    }

  }

  .container {
    padding: 0rpx $page-row-spacing;
  }

  ::v-deep .cu-bar {
    min-height: 50rpx;
  }

  ::v-deep .cu-bar .action:first-child {
    margin-left: -3px;
    font-size: 36rpx;
    font-weight: bold;
  }

</style>
